<template>
	<view class="container">
		<view class="header">
			<image src="../../static/login/head.png" class="header-img"></image>
			<view class="logo">
				<image src="../../static/login/login.png" class="header-logo"></image>
			</view>
		</view>
		<view class="login">
			<view class="cu-card case card">
				<view class="cu-item shadow">
					<form>
						<view class="cu-form-group">
							<image src="../../static/login/user.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="请输入用户名" name="input" style="margin-left: 10rpx;"></input>
						</view>
						<view class="cu-form-group">
							<image src="../../static/login/pass.png" style="width: 35rpx;height: 38rpx;"></image>
							<input placeholder="请输入密码" name="input" style="margin-left: 10rpx;"></input>
						</view>
						<view class="reigster">
							<navigator url="../register/register" style="color: #1890FF;">立即注册</navigator>
							<navigator url="../register/register" style="color: #CCCCCC;">忘记密码？</navigator>
						</view>
						<view class="cu-form-group">
							<button class="cu-btn block bg-blue margin-tb-sm lg" style="width: 100%; border-radius: 50rpx;">
								<text class="cuIconfont-spin" :class="loading ? 'cuIcon-loading2' : ''"></text>登录</button>
						</view>
					</form>
				</view>
			</view>
		</view>
		<view class="footer">
			<navigator url="../register/register">
				<image src="../../static/login/qq.png" mode=""></image>
			</navigator>
			<navigator url="../register/register">
				<image src="../../static/login/wechat.png" mode=""></image>
			</navigator>
			<navigator url="../register/register">
				<image src="../../static/login/pay.png" mode=""></image>
			</navigator>
			<navigator url="../register/register">
				<image src="../../static/login/phone.png" mode=""></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.header {
		position: relative;
		width: 100%;
		height: 40vh;
	}

	.header-img {
		width: 100vw;
	}

	.logo {
		width: 252rpx;
		height: 252rpx;
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 22vh auto;
	}

	.header-logo {
		width: 252rpx;
		height: 252rpx;
	}

	.login {
		height: 550rpx;
	}

	.login .cu-card {
		box-shadow:0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2);
		height: 100%;
	}

	.login .shadow {
		height: 100%;
		box-sizing: border-box;
		padding: 80rpx 15rpx;
	}
	.login .reigster{
		padding: 25rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.footer{
		margin: 200rpx auto;
		display: flex;
		width: 80%;
		height: 100rpx;
		justify-content: space-evenly;
	}
	.footer image{
		width: 80rpx;
		height: 80rpx;
	}
</style>
